
<template>
    <el-container>
        <el-header>
            <h2>储运箱202122数据展示</h2>
        </el-header>
        <el-main>
            <el-row>
                <div style="width: 700; height: 600; color:red; float: left;">
                    <el-card style="width: 700px; height: 350px; ">

                        <div style="text-align: left; width: 350px;  float: right">
                            <h3>温度阈值1:{{ limit1 }}℃</h3>
                            <h3>温度阈值2:{{ limit2 }}℃</h3>
                            <h3>光照强度阈值:{{ limit3 }}</h3>
                            <h3>可利用温差:{{ limit4 }}</h3>
                            <h3>电机状态:{{ buttonvalue1 }}</h3>
                        </div>

                        <div style="text-align: left; width: 350px;  ">
                            <h3>温度1:{{ state1 }}℃</h3>
                            <h3>温度2:{{ state9 }}℃</h3>
                            <!-- <h3>湿度一:{{ state2 }}℃</h3> -->
                            <!-- <h3>水质1:{{ TDS1 }}</h3> -->
                            <!-- <h3>水质2:{{ TDS2 }}</h3> -->
                            <h3>光照强度:{{ state3 }}</h3>
                            <h3>风扇1功率:{{ power1 }}</h3>
                            <h3>风扇2功率:{{ power2 }}</h3>
                            <h3>LED灯发光强度:{{ power3 }}</h3>
                        </div>



                    </el-card>
                    <!-- <el-card style="width: 700px; height: 250px;">
                        <div style="text-align: left; width: 350px; float: right; ">
                            <h3>功率1:{{ power1 }}</h3>
                            <h3>功率2:{{ power2 }}</h3>
                            <h3>功率3:{{ power3 }}</h3>

                        </div>
                        <div style="text-align: left; width: 350px;  ">
                            <h3>温度阈值:{{ limit1 }}℃</h3>
                            <h3>低水位阈值:{{ limit2 }}</h3>
                            <h3>高水位阈值:{{ limit3 }}</h3>
                            <h3>饮水机属性:{{ buttonvalue1 }}</h3>
                        </div>
                    </el-card> -->
                </div>



                <div style="width: 700; height: 600; color:red; float: left; ">
                    <el-card style="width: 700px; height: 150px;">
                        <h3>当前时间:{{ currentTime }}</h3>
                    </el-card>
                    <el-card style="width: 700px; height: 200px;">
                        <div style="text-align: left; width: 350px;  ">
                            <h3>v1:{{ state5 }}</h3>
                            <h3>v2:{{ state6 }}</h3>
                            <!-- <h3>电压强度:{{ state7 }}</h3> -->
                            <h3>警报:{{ warn }}</h3>
                        </div>
                    </el-card>
                </div>



            </el-row>
            <el-row>
                <div style="width: 300; height: 600; color:red; float: left; ">
                    <el-card style="width: 700px; height: 600px; ">
                        <div style="text-align: left; width: 350px;  float: right;">
                            <h3>电机状态</h3>
                            <el-button type="primary" @click="setbuttonvalue1">正转</el-button>
                            <br>
                            <el-button type="primary" @click="setbuttonvalue2">反转</el-button>
                            <br>
                            <el-button type="primary" @click="setbuttonvalue3">关闭</el-button>
                            <br>
                            <h3>空调开关</h3>
                            <el-switch @change="setswitch3" v-model="switch3" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>风扇1</h3>
                            <el-switch @change="setswitch1" v-model="switch1" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>风扇2</h3>
                            <el-switch @change="setswitch2" v-model="switch2" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>LED灯</h3>
                            <el-switch @change="setswitch4" v-model="switch4" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>


                        </div>
                        <div style="text-align: left; width: 300px; height: 600px; ">
                            <h3>设置温度阈值1</h3>
                            <el-input v-model="inputlimit1" placeholder="温度阈值1" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setlimit1">确定</el-button>
                            <h3>设置温度阈值2</h3>
                            <el-input v-model="inputlimit2" placeholder="温度阈值2" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setlimit2">确定</el-button>
                            <h3>设置光照强度阈值</h3>
                            <el-input v-model="inputlimit3" placeholder="光照强度阈值" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setlimit3">确定</el-button>
                            <h3>设置风扇1功率</h3>
                            <el-input v-model="inputpower1" placeholder="风扇1功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower1">确定</el-button>
                            <h3>设置风扇2功率</h3>
                            <el-input v-model="inputpower2" placeholder="风扇2功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower2">确定</el-button>

                        </div>
                    </el-card>
                </div>
                <div style="width: 300; height: 600;  float: left; ">
                    <el-card style="width: 700px; height: 600px;">
                        <div style="text-align: left; width: 300px; height: 600px; ">
                            <h3>设置LED灯功率</h3>
                            <el-input v-model="inputpower3" placeholder="LED灯功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower3">确定</el-button>
                            <h3>设置可利用温差</h3>
                            <el-input v-model="inputlimit4" placeholder="温度阈值1" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setlimit4">确定</el-button>
                        </div>
                    </el-card>
                </div>

            </el-row>
        </el-main>
    </el-container>


</template>


<script>
const axios = require('axios');
import { websocket } from '@/utils/websocket';
//相当于导入和逻辑处理一起解决
var sendMeg = "";//处理发送给硬件的信息
var Meg = "";
var cardid = ""; // eslint-disable-line no-unused-vars

export default {
    // el: '#control',
    data() {
        return {
            inputpower1:"",
            inputpower2:"",
            inputpower3:"",
            power1:0,
            power2:0,
            power3:0,
            inputlimit1: "", //设置温度阈值1
            inputlimit2: "", //设置温度阈值2
            inputlimit3: "", //设置光照阈值
            inputlimit4: "", //设置可利用温差
            switch1: false,
            switch2: false,
            switch3: false, //空调开关
            switch4: false, //LED开关
            card: ["C78874E56"],
            state1: "", //温度
            // state2:"", 
            state3: "", //光照强度
            state4: "",
            state5: "", //v1
            state6: "", //v2
            // state7:"",
            state8: "",
            state9: "",
            currentTime: "",
            limit1: 30, //温度阈值1
            limit2: 20, //温度阈值2
            limit3: 50, //光照强度阈值
            limit4: 20, //可利用温差
            warn: "",
            buttonvalue1: "", //饮水机属性  
            cardid: "", //传来的卡号
        }
    },
    computed: {
    },
    watch: {//监听错误次数变化


    },
    created() {
        this.updateTime();
        this.initWecSocket();
    },
    methods: {
        updateTime: function () {  //获取当前时间
            this.currentTime = new Date().toLocaleTimeString();
            setTimeout(this.updateTime); // 每秒更新一次时间
        },
        setpower3: function () { //设置LED灯功率
            this.power3 = this.inputpower3;
            if (thid.power3 < 10) {
                sendMeg = "HWled100" + this.power3 + "Z";
            }
            else if (this.power3 < 100 && this.power3 > 10) {
                sendMeg = "HWled10" + this.power3 + "Z";
            }
            else {
                sendMeg = "HWled1" + this.power3 + "Z";
            }
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setpower2: function () { //设置风扇1功率
            this.power2 = this.inputpower2;
            if (this.power2 < 10) {
                sendMeg = "HWfan200" + this.power2 + "Z";
            }
            else if (this.power2 < 100  && this.power2 > 10) {
                sendMeg = "HWfan20" + this.power2 + "Z";
            }
            else {
                sendMeg = "HWfan2" + this.power2 + "Z";
            }
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setpower1: function () { //设置风扇1功率
            this.power1 = this.inputpower1;
            if (this.power1 < 10) {
                sendMeg = "HWfan100" + this.power1 + "Z";
            }
            else if (this.power1 < 100 && this.power1 > 10) {
                sendMeg = "HWfan10" + this.power1 + "Z";
            }
            else {
                sendMeg = "HWfan1" + this.power1 + "Z";
            }
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setlimit4: function () { //设置可利用温差
            this.limit4 = this.inputlimit4;
        },
        setlimit3: function () { //设置光照阈值
            this.limit3 = this.inputlimit3;
            sendMeg = "HWt1" + this.limit1 + "t2" + this.limit2 + "ls" + this.limit3 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setlimit2: function () { //设置温度阈值2
            this.limit2 = this.inputlimit2;
            sendMeg = "HWt1" + this.limit1 + "t2" + this.limit2 + "ls" + this.limit3 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setlimit1: function () { //设置温度阈值1
            this.limit1 = this.inputlimit1;
            sendMeg = "HWt1" + this.limit1 + "t2" + this.limit2 + "ls" + this.limit3 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        setswitch4: function () { //设置空调开关/指示灯开关
            if (this.switch4 == true) {
                axios.get("http://localhost:8888/sendMessageTo/HWled1100Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWled1000Z");
            }
        },
        setswitch3: function () { //设置空调开关/指示灯开关
            if (this.switch3 == true) {
                axios.get("http://localhost:8888/sendMessageTo/HWled0100Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWled0000Z");
            }
        },
        setswitch2: function () { //设置风扇2开关/风机
            if (this.switch2 == true) {
                axios.get("http://localhost:8888/sendMessageTo/HWfan2100Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWfan2000Z");
            }
        },
        setswitch1: function () { //设置风扇1开关/空调压缩机
            if (this.switch1 == true) {
                axios.get("http://localhost:8888/sendMessageTo/HWfan1100Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWfan1000Z");
            }
        },
        setbuttonvalue3: function () { //设置关闭
            this.buttonvalue1 = "关闭"
            axios.get("http://localhost:8888/sendMessageTo/HWdian0Z");
        },
        setbuttonvalue2: function () { //设置反转
            this.buttonvalue1 = "反转"
            axios.get("http://localhost:8888/sendMessageTo/HWdian2Z");
        },
        setbuttonvalue1: function () { //设置正转
            this.buttonvalue1 = "正转"
            axios.get("http://localhost:8888/sendMessageTo/HWdian1Z");
        },
        reconnect: function () {
            sendMeg = "HWt1" + this.limit1 + "t2" + this.limit2 + "ls" + this.limit3 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        initWecSocket: function () {
            // this.webSocket = new WebSocket("ws://localhost:8888//ws/WebSocket");
            this.webSocket = websocket;
            this.webSocket.onmessage = this.webSocketOnmessage;
            // this.webSocket.onerror = this.webSocketOnerror();
            //初始化完毕之后echarts显示数据信息
        },
        webSocketOnmessage: function (event) { //对接受的信息进行逻辑判断
            //    Meg=JSON.parse(event.data)
            Meg = event.data;
            console.log("收到硬件信息" + Meg);
            //根据收到的信息实时显示到页面
            if (event.data.substring(0, 1) == "t") {
                this.state1 = event.data.substring(1,); //温度1
                if(this.state1 > this.limit1){  //温度1高于阈值1
                    if(this.state1 - this.state9 > this.limit4){
                        this.switch2 = true;
                        axios.get("http://localhost:8888/sendMessageTo/HWfan2100Z"); //打开风扇2
                        this.power2 = this.state1  - this.limit1;  //风扇2的功率成正比
                        sendMeg = "HWfan2" + this.power2 + "Z";
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                    }
                    else{
                        this.switch1 = true;
                        axios.get("http://localhost:8888/sendMessageTo/HWfan1100Z");
                        this.buttonvalue1 = " 正转";
                        axios.get("http://localhost:8888/sendMessageTo/HWdian1Z");
                        this.power1 = this.state1  - this.limit1;
                        sendMeg = "HWfan1" + this.power1 + "Z";
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                    }
                }
                else if(this.state1 < this.limit2){ //温度1低于阈值2
                    if(this.state9 - this.state1 > this.limit4){
                        this.switch2 = true;
                        axios.get("http://localhost:8888/sendMessageTo/HWfan2100Z");
                        this.power2 = this.limit2 - this.state1;
                        sendMeg = "HWfan2" + this.power2 + "Z";
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);      
                    }
                    else{
                        this.switch1 = true;
                        axios.get("http://localhost:8888/sendMessageTo/HWfan1100Z");
                        this.buttonvalue1 = "反转"
                        axios.get("http://localhost:8888/sendMessageTo/HWdian2Z");
                        this.power1 = this.limit2 - this.state1;
                        sendMeg = "HWfan1" + this.power1 + "Z";
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                    }
                }
                else if(this.state1 < this.limit1 && this.state1 > this.limit2){
                    this.switch1 = false;
                    axios.get("http://localhost:8888/sendMessageTo/HWfan1000Z");
                    this.switch2 = false;
                    axios.get("http://localhost:8888/sendMessageTo/HWfan2000Z");
                    this.buttonvalue1 = "关闭"
                    axios.get("http://localhost:8888/sendMessageTo/HWdian0Z");

                }
            }
            if (event.data.substring(0, 2) == "Hd") { // 温度2
                this.state9 = event.data.substring(2,);
                if (this.state3 == "热水") {
                    if (this.state9 < this.limit1) {
                        axios.get("http://localhost:8888/sendMessageTo/HWled11Z");
                    }
                    if (this.state9 > this.limit1) {
                        axios.get("http://localhost:8888/sendMessageTo/HWled10Z");
                    }
                }
            }
            if (event.data.substring(0, 2) == "ls") { // 光照强度逻辑判断
                this.state3 = event.data.substring(2,);
                if(this.state3 < this.limit3){
                    this.switch4 = true;
                    axios.get("http://localhost:8888/sendMessageTo/HWled1100Z");
                    this.power3 = this.limit3 - this.state3;
                    if(this.power3 < 10){
                        sendMeg = "HWled100" + this.power3 + "Z";
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                    }else if(this.power3 < 100 && this.power3 > 10){
                        sendMeg = "HWled10" + this.power3 + "Z";
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                    }else{
                        sendMeg = "HWled1" + this.power3 + "Z";
                        axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
                    }

                }
            
            }
            if (event.data.substring(0, 2) == "T1") { //安卓那边可以修改阈值
                this.limit1 = event.data.substring(2,);
            }
            if (event.data.substring(0, 2) == "SL") {
                this.limit2 = event.data.substring(2,);
            }
            if (event.data.substring(0, 2) == "SH") {
                this.limit3 = event.data.substring(2,);
            }
            if (event.data.substring(0, 2) == "id") {
                console.log("收到！")
                var flag = false; //设置是都符合标准校园卡的标志位
                for (var i = 0; i < this.card.length; i++) {
                    if (event.data.substring(2,) == this.card[i]) {
                        console.log("符合")
                        this.cardid = event.data.substring(2,);
                        flag = true;
                        this.buttonvalue1 = "正常"
                        axios.get("http://localhost:8888/sendMessageTo/HWauto2Z"); //如果是学生卡，发送可以正常饮水的属性
                    }
                }
                if (flag == false) {
                    console.log("卡不符合！")
                    this.buttonvalue1 = "暂停";  // 这个卡不符合不提供饮水服务
                    axios.get("http://localhost:8888/sendMessageTo/HWauto1Z");  //此时为暂停属性
                }
            }
            if (event.data == "Reconnect") {
                this.reconnect();
            }
        },

    }

}
</script>
